Pinia如何modules模块划分、模块之间如何通信？

作者：管理员 2022-05-26 16:51:25 分类：Vue3新篇章阅读（5543） 0

值得庆幸的是Pinia不需要像Vuex一样使用modules分模块，只需要在store目录中直接定义对应模块就可以了，因此，你可以先简单理解为它是根据文件目录划分的。文章后面还会讲到分模块后，模块之前的数据该怎么通信

一、目录结构

1
2
3

store/user.js
store/shop.js
...

二、store/user.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

import { defineStore } from 'pinia'

export const user = defineStore({
id: 'user',
state:()=>{
return {
userInfo:{
nickName:'章三'
},
token:'xfdfdsjkdsj'
}
},
getters:{

},
actions:{

}
})

三、组件template使用

1
2
3
4
5
6
7
8
9
10
11
12
13

<template>
<div>
<h1>A组件</h1>
{{ userInfo.nickName }}

</div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { user } from '../store/user'
const store = user();
let { userInfo } = storeToRefs(store);
</script>

四、modules模块之间通信

需求：在pinia a文件的action中定义一个方法，想修改pinia b里面的data，之前vuex有rootState，{ root: true }参数那些，那么在pinia中该如何修改？实际上我们只需要在pinia a文件导入pinia b，然后就可以获取到pinia b的store实力，注意，Pinia的每个模块文件的id一定得是唯一的

Pinia_a.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<template>
<div>
<h2>store测试</h2>
<p>{{ textData }}</p>
<el-button type="primary" @click="reduceCunt">减少</el-button>
<el-button type="primary" @click="addCunt">增加</el-button>

<h2>子组件pinia_B</h2>
<pinia_b></pinia_b>

<br>
<el-button id="noModel" type="primary" @click="changeAtoB">组件A通过Pinia修改子组件B</el-button>
</div>
</template>

<script setup lang="ts">
import pinia_b from './pinia_b.vue'
import { useStoreA } from '@/store/modules/page_a'
const storeA = useStoreA();
let changeAtoB = () => {
console.log('storeA', storeA);
storeA.calcUpdata()
}
</script>

<style scoped>
</style>

Pinia_b.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<template>
<div>
<h3>pinia子组件pniaBcuntData值------{{ pniaBcuntData }}</h3>
</div>
</template>

<script setup lang="ts">
import { useStoreB } from '@/store/modules/page_b'
const piniaBstore = useStoreB();
let { pniaBcuntData } = storeToRefs(piniaBstore);
</script>

<style scoped>
</style>

store/page_a.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

import { defineStore } from 'pinia';
import { useStoreB } from '@/store/modules/page_b';
const storeB = useStoreB();
let { pniaBcuntData } = storeToRefs(storeB);

export const useStoreA = defineStore('storeIdA', {
state: () => {
return {
count: 100,
};
},
getters: {},
actions: {
myTest(){
console.log(1)
},
calcUpdata() {
pniaBcuntData.value = '改变了';
},
},
});

store/page_b.ts

1
2
3
4
5
6
7
8
9
10
11

import { defineStore } from 'pinia'

export const useStoreB = defineStore('storeIdB', {
state: () => {
return {
pniaBcuntData: '默认值',
}
},
getters:{},
actions:{}
})

本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创，版权归原作者所有；仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：343049466@qq.com

赞(0) 打赏

标签：

Pinia Vuex 状态管理

上一篇：Vue3中Pinia实现数据状态管理state、getters、actions

下一篇：Pinia如何让数据持久化存储？